<template>
  <div class="pro-custom-map">
    <div ref="host" class="pro-custom-map-host" />
    <slot />
  </div>
</template>

<script>
import mapboxgl from 'mapboxgl'
import MapboxLanguage from 'MapboxLanguage'

mapboxgl.accessToken = 'pk.eyJ1IjoibWFvcmV5IiwiYSI6ImNqNWhrenIwcDFvbXUyd3I2bTJxYzZ4em8ifQ.KHZIehQuWW9AsMaGtATdwA'

export default {
  name: 'ProCustomMap',
  data() {
    return {
      mapIns: null
    }
  },
  mounted() {
    this.initMapboxgl()
  },
  methods: {
    initMapboxgl() {
      this.mapIns = new mapboxgl.Map({
        container: this.$refs.host,
        style: '',
        center: [0, 0],
        pitch: 30,
        zoom: 12
      })
      const langControl = new MapboxLanguage({ defaultLanguage: 'zh' })
      this.mapIns
        .addControl(langControl)
        .addControl(new mapboxgl.NavigationControl())
    }
  }
}
</script>

<style lang="less">
.pro-custom-map {
  position: relative;
  display: flex;
  height: 100%;

  &-host {
    flex: 1;
  }

  a.mapboxgl-ctrl-logo,
  .mapboxgl-ctrl.mapboxgl-ctrl-attrib {
    display: none;
    pointer-events: none;
  }
}
</style>
